{% extends "StartGroup/groupHome.html" %}
{% block content %}
    <script src="/{{ media_url }}contifyuser/js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
	$(document).ready(function(){$("div.sort").click(function(){
	    var sortBy = $(this).attr('sortBy');
            var sortdir = $(this).attr('sortdir');
	    jQuery.ajax({
	      url: '/connectpeople/groupMembers/',
	      type: 'POST',
	      data: {'sortBy': sortBy, 'sortdir': sortdir},
	      dataType: 'json',
	      success: function(json){
                $("#members").html(json.htmlList);
	    },
	      error: function(xhr, ajaxOptions, thrownError){
		alert("An Error Has Occurred. Please try again.");
	      }
	    });
	});
	});

    </script>

{% load tags %}
    
    <div class="nobreak membersPage">
        <div>
	    <div>Sort By:</div>
            <div id="sortByName" class="nobreak">Name</div>
            <div class="nobreak">
                <div class="sort" sortBy="name" sortdir="asc"><img title="Name Ascending" src="/{{ media_url }}/images/sort_ascending.png" class="sortIcons"/></div>
                <div class="sort" sortBy="name" sortdir="desc"><img title="Name Descending" src="/{{ media_url }}/images/sort_descending.png" class="sortIcons"/></div>
            </div>
            <div id="sortByJoin" class="nobreak">Join Date</div>
            <div class="nobreak">
                <div class="sort" sortBy="join" sortdir="asc"><img title="Join Date Ascending" src="/{{ media_url }}/images/sort_ascending.png" class="sortIcons"/></div>
                <div class="sort" sortBy="join" sortdir="desc"><img title="Join Date Descending" src="/{{ media_url }}/images/sort_descending.png" class="sortIcons"/></div>
            </div>
        </div>    
        <div id="members">
            {{ htmlList }}
        </div>
    </div>
{% endblock %}
